<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      html {
        font-size: 10vw;
      }

      body {
        margin: 0;
      }

      #page {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100%;
        overflow: hidden;
      }

      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      #wrap {
        position: relative;
        width: 100vw;
        overflow: hidden;
      }

      #list {
        float: left;
        display: flex;
        display: -webkit-box;
      }

      #list li {
        flex: none;
        width: 100vw;
      }

      #list img {
        width: 100%;
        display: block;
      }

      .nav {
        position: absolute;
        left: 0;
        bottom: 0.2rem;
        width: 100%;
        text-align: center;
        vertical-align: top;
      }

      .nav a {
        display: inline-block;
        width: 0.3rem;
        height: 0.3rem;
        background: #fff;
        margin: 0 0.1rem;
        border-radius: 0.15rem;
        transition: 0.3s;
      }

      .nav .active {
        width: 0.6rem;
        color: #fff;
      }

      .textList {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .textList li {
        font: 14px/40px "宋体";
        padding-left: 20px;
        border-bottom: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div id="page">
      <div>
        <div id="wrap">
          <ul id="list">
            <li><img src="img/banner01.png" /></li>
            <li><img src="img/banner02.png" /></li>
            <li><img src="img/banner03.png" /></li>
            <li><img src="img/banner04.png" /></li>
          </ul>
          <nav class="nav"><a class="active"></a><a></a><a></a><a></a></nav>
        </div>
        <ul class="textList"></ul>
      </div>
    </div>
    <script src="dist/bscroll.min.js"></script>
    <script>
      //填充列表内容
      {
        let list = document.querySelector(".textList");
        list.innerHTML = [...".".repeat(100)]
          .map((item, index) => `<li>这是第${index}个li</li>`)
          .join("");
      }
      // 幻灯片
      {
        let page = document.querySelector("#page");
        new BScroll(page);
        let wrap = document.querySelector("#wrap");
        let navs = document.querySelectorAll(".nav a");
        let tabPic = new BScroll(wrap, {
          scrollX: true,
          scrollY: false,
          eventPassthrough: "vertical",
          snap: {
            loop: true,
            threshold: 0.2,
          },
          momentum: false,
        });
        tabPic.on("scrollEnd", () => {
          let now = tabPic.getCurrentPage();
          console.log(now);
          navs.forEach((item) => {
            item.className = "";
          });
          navs[now.pageX].className = "active";
        });
        let list = document.querySelector(".textList");
        list.addEventListener("touchend", () => {
          //tabPic.next(); 下一张
          // tabPic.prev(); 下一张
        });
      }
    </script>
  </body>
</html>
